<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>问答详情</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__dropload.css" />

    <style>
        body {
            padding-bottom:70px;
        }
        .list_content {
            background-color: #ffffff;
            width: 100%;
            height: auto;
            padding:1rem 0.75rem 0rem 0.75rem;
            margin-bottom:0.5rem;
            margin-top:0.5rem;
        }
        .tit_top {
            width: 100%;
            color: #4D4D4D;
            font-size: 0.75rem;
            line-height: 1.05rem;
            font-weight: bold;
            margin-bottom:0.5rem;
        }
        .tit_content {
            width: 100%;
            color: #666;
            font-size: 0.7rem;
            line-height: 1rem;
            height: auto;
            padding-top:0.75rem;
            padding-bottom: 0.75rem;
        }
        .photoAll {
            width: 100%;
            padding-bottom: 0.75rem;
        }
        .photo {
            display: inline-block;
            position: relative;
        }
        .photo:nth-child(3n+2) {
            margin-right: 12.5px;
            margin-left: 12.5px;
        }
        .photo img {
            width: 100%;
            height: 100%;
        }
        .time{
            padding-left:0.6rem;
        }
        .intro{
            color: #999999;
            font-size: 0.7rem;
            padding-bottom:0.9rem;
        }
        .comment {
            background-color: #ffffff;
            width: 100%;
            height: auto;
            padding:0 0.75rem;
            margin-top: 0.525rem;
        }
        .number{
            padding-top:1.025rem;
            padding-bottom:0.35rem;
            color: #333;
            font-size: 0.7rem;
        }
        .comment_one{
            padding-top:0.525rem;
            padding-bottom:0.525rem;
        }
        .avatar{
            width: 1.75rem;
            height: 1.75rem;
            margin-right:0.75rem;
            border-radius: 50%;
        }
        .avatar img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .name{
            height: 1.75rem;
            line-height: 1.75rem;
            color: #333;
            font-size: 13px;
        }
        .delete{
            width: 0.85rem;
            height: 0.85rem;
            margin-top:0.45rem;
        }
        .talk_xq{
            color: #333;
            font-size: 14px;
            padding-top:0.325rem;
            padding-bottom:0.7rem;
            line-height:1rem;
            word-break: break-all;
            word-wrap: break-word;
        }
        .photooo {
            display: inline-block;
            position: relative;
            border-radius:5px;
        }
        .photooo:nth-child(3n+2) {
            margin-left:11px;
            margin-right:11px;
        }
        .photooo img {
            width: 100%;
            height: 100%;
            border-radius:5px;
        }
        .time1{
            color: #B3B3B3;
            font-size: 12px;
        }
        .zan1{
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_zan.png') no-repeat center center;
            background-size: 15px 14px;
            vertical-align: bottom;
        }

        .comment_footer {
            height: 30px;
            line-height: 30px;
            color: #b3b3b3;
            font-size: 0.8rem;
            margin-top: 0.25rem;
        }

        .comment_time{
            font-size: 0.6rem;
        }

        .zan {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_nozan.png') no-repeat center 7px;
            background-size: 15px 15px;
            vertical-align: bottom;
        }

        .comment_total {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_news.png') no-repeat center center;
            background-size: 16px 16px;
            vertical-align: bottom;
        }
        .float_right{
            display: inline-block;width: auto;
            height: 30px;
            line-height: 30px;
            float: right;
        }
        .comment_all{
            margin-right: 1rem;
        }

        .comment_imgs,.comment_imgs1,.comment_imgs2{
            margin-bottom: 0.5rem;
        }
        .comment_imgs img,  .comment_imgs1 img ,  .comment_imgs2 img  {
            float: left;
            width: 86px;
            height: 86px;
            margin-right: 0.5rem;
            border-radius: 0.25rem;
        }
        .comment_imgs2 img{
            width: 8.5rem;
            height: 8.5rem;
        }

        .comment_imgs img:last-child,.comment_imgs1 img:last-child,.comment_imgs0 img:last-child {
            float: left;
            width: 86px;
            height: 86px;
            margin-right: 0;

        }
        .total{
            font-size:14px;
            color:#333333;
            padding-top:1rem;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">{$res.count}条回复</div>
</header>
<div class="comment">
    <div class="flex-wrap comment_one">
        <div class="avatar">
            <img  src="{$res.user_image}" />
        </div>
        <div class="flex-con talk">
            <div class="name flex-wrap">
                <div class="flex-con aui-ellipsis-1">{$res.user_username}</div>
                {if $res['is_delete'] == 1}
                <div class="delete" onclick="zj_fb(this)" idd="{$res.answer_id}">
                    <img  src="__IMG__del@3x.png" />
                </div>
                {/if}
            </div>
            <div class="talk_xq">
                {$res.answer_content}
            </div>

            <!-- 三张图 -->
            <div class="comment_imgs after">
                {volist name="res['answer_img']" id="vo"}
                <img src="{$vo}">
                {/volist}
            </div>

            <div class="comment_footer">
                <span class="comment_time">{$res.answer_time}</span>
                <span class="float_right ">
                    {if $res.dz==1}
                    <span class="zan1" onclick="fnZan1(this)" iddtype="1" idd="{$res.answer_id}" id="id_{$res.answer_id}"></span>
                    {else /}
                    <span class="zan" onclick="fnZan1(this)" iddtype="1" idd="{$res.answer_id}" id="id_{$res.answer_id}"></span>
                    {/if}
                     <span id="zan_num">{$res.answer_dz}</span>
                </span>
                <span class="float_right comment_all"><span class="comment_total"></span>  {$res.count} </span>
            </div>


        </div>
    </div>

</div>
<div class="comment">
    <div class="total">全部回复</div>
    <div class="upOrDown">
        <div class="upOrDown_data">
            {volist name="res['under']" id="vv"}
            <div class="flex-wrap comment_one">
                <div class="avatar">
                    <img  src="{$vv.user_image}" />
                </div>
                <div class="flex-con talk">
                    <div class="name flex-wrap">
                        <div class="flex-con aui-ellipsis-1">{$vv.name2}</div>
                    </div>
                    <div class="talk_xq">
                        {$vv.reply_content}
                    </div>
                    <div class="flex-wrap">
                        <div class="flex-con time1">{$vv.reply_create_time}</div>
                        {if $vv.dzr==1}
                        <div class="zan1" onclick="fnZan1(this)" iddtype="2"  idd="{$vv.reply_id}" id="id_{$vv.reply_id}"></div>
                        {else /}
                        <div class="zan" onclick="fnZan1(this)" iddtype="2"  idd="{$vv.reply_id}" id="id_{$vv.reply_id}"></div>
                        {/if}
                    </div>
                </div>
            </div>
            {/volist}
        </div>
    </div>
</div>

<input type="hidden" name="id" value="{$id}">
<input type="hidden" name="answer_information_id" value="{$answer_information_id}">
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__dropload.min.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script>
    //删除评论
    function zj_fb(el) {
        var idd=$api.attr(el,'idd');
        var answer_information_id = $('input[name="answer_information_id"]').val();
        $.ajax({
            url:'{:url("Information/delAnswer")}',
            data:{id:idd,type:1},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                if(data.status==200){
                    layer.open({
                        content: '操作成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    location.href='{:url("Information/detail")}?id='+answer_information_id;
                }else if(data.status=='E001'){
                    layer.open({
                        content: '操作失败'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    window.location.reload();
                }
            }
        })
    }
    //点赞
    function fnZan1(el) {
        var idd=$api.attr(el,'idd');
        var iddtype=$api.attr(el,'iddtype');

        $.ajax({
            url:'{:url("Information/like")}',
            data:{answer_id:idd,type:iddtype},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                if(data.status==200){
                    if ($api.hasCls($api.byId('id_' + idd), 'zan1')) {
                        $api.removeCls($api.byId('id_' + idd), 'zan1');
                        $api.addCls($api.byId('id_' + idd), 'zan');
                        if(iddtype==1){
                            $("#zan_num").text(parseInt($("#zan_num").text())- 1) ;
                        }
                        return;
                    } else {
                        $api.removeCls($api.byId('id_' + idd), 'zan');
                        $api.addCls($api.byId('id_' + idd), 'zan1');
                        if(iddtype==1){
                            $("#zan_num").text(parseInt($("#zan_num").text())+ 1) ;

                        }

                        return;

                    }
                }
            }
        })
    }
</script>
<script>
    var page = 1;
    /**
     * 上拉加载，下拉刷新
     */
    var dropload = $('.upOrDown').dropload({
        scrollArea : window,
        autoLoad : true,
//        domUp : {
//            domClass   : 'dropload-up',
//            domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
//            domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
//            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
//        },
//        domDown : {
//            domClass   : 'dropload-down',
//            domRefresh : '<div class="dropload-refresh">刷新</div>',
//            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
//            domNoData  : '<div class="dropload-noData">无数据</div>'
//        },
        loadDownFn : function(me){
            var keyword = $('input[name="id"]').val();
            page++;
            $.ajax({
                url:'{:url("Information/ajaxmoreanswer")}',
                data:'page='+page+'&id='+keyword,//
                type:'POST',
                dataType:'JSON',
                success: function(data){
                    var arrLen = data.msg.length;
                    if(arrLen<=0){

                        me.lock();
//                         无数据
                        me.noData(true);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }else{
                        var datas = data.msg;
                        $.each(datas,function(key,v){
                            var _html='';
                            _html +='<div class="flex-wrap comment_one">';
                            _html +='<div class="avatar">';
                            _html +='<img  src="'+v.user_image+'" /></div>';

                            _html +='<div class="flex-con talk">';
                            _html +='<div class="name flex-wrap">'
                            _html +='<div class="flex-con aui-ellipsis-1">'+v.user_username+'</div>'

                            _html +='<div class="talk_xq">'+v.reply_content+'</div>';
                            _html +='<div class="flex-wrap">';
                            _html +='<div class="flex-con time1">'+v.reply_create_time+'</div>';
                            if(v.dz==1){
                                _html +='<div class="zan1" onclick="fnZan1(this)" iddtype="2"  idd="'+v.reply_id+'" id="id_'+v.reply_id+'"></div>';
                            }else{
                                _html +='<div class="zan" onclick="fnZan1(this)" iddtype="2"  idd="'+v.reply_id+'" id="id_'+v.reply_id+'"></div>';
                            }
                            _html +='</div></div></div>';

                            $(".upOrDown_data").append(_html);
                        });
//                        $('.upOrDown_data').append(data);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }

                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadUpFn : function(me){
            var keyword = $('input[name="id"]').val();

            page = 1;
            $.ajax({
                url:'{:url("Information/ajaxmoreanswer")}',
                data:'page='+page+'&id='+keyword,
                type:'POST',
                dataType:'json',
                success: function(data){
                    $('.upOrDown_data').empty();//
                    var datas = data.msg;
                    $.each(datas,function(key,v){
                        var _html='';
                        _html +='<div class="flex-wrap comment_one">';
                        _html +='<div class="avatar">';
                        _html +='<img  src="'+v.user_image+'" /></div>';

                        _html +='<div class="flex-con talk">';
                        _html +='<div class="name flex-wrap">'
                        _html +='<div class="flex-con aui-ellipsis-1">'+v.user_username+'</div>'

                        _html +='<div class="talk_xq">'+v.reply_content+'</div>';
                        _html +='<div class="flex-wrap">';
                        _html +='<div class="flex-con time1">'+v.reply_create_time+'</div>';
                        if(v.dz==1){
                            _html +='<div class="zan1" onclick="fnZan1(this)" iddtype="2"  idd="'+v.reply_id+'" id="id_'+v.reply_id+'"></div>';
                        }else{
                            _html +='<div class="zan" onclick="fnZan1(this)" iddtype="2"  idd="'+v.reply_id+'" id="id_'+v.reply_id+'"></div>';
                        }
                        _html +='</div></div></div>';

                        $(".upOrDown_data").append(_html);
                    });
                    me.resetload();
                    me.unlock();
                    me.noData(false);



                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    me.resetload();
                }
            });
        }
    });
</script>
</html>
